<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar">
    <table class="infoPanel">
        <tbody>
        <tr>
            <td>Click on the 3D window then use the keyboard to change settings.</td>
        </tr>
        <tr>
            <td>Heading: <span id="heading"></span>°</td>
        </tr>
        <tr>
            <td>← to left/→ to right</td>
        </tr>
        <tr>
            <td>Pitch: <span id="pitch"></span>°</td>
        </tr>
        <tr>
            <td>↑ to up/↓ to down</td>
        </tr>
        <tr>
            <td>roll: <span id="roll"></span>°</td>
        </tr>
        <tr>
            <td>← + ⇧ left/→ + ⇧ right</td>
        </tr>
        </tbody>
    </table>
</div>


<script>
    var initCesium = new InitCesium();

    var viewer = initCesium.initViewer('cesiumContainer');
    var canvas = viewer.canvas;
    canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
    canvas.addEventListener('click', function() {
        canvas.focus();
    });
    canvas.focus();

    var scene = viewer.scene;
    var camera = viewer.camera;
    var controller = scene.screenSpaceCameraController;
    var r = 0;
    var center = new Cesium.Cartesian3();

    var hpRoll = new Cesium.HeadingPitchRoll();
    var hpRange = new Cesium.HeadingPitchRange();
    var deltaRadians = Cesium.Math.toRadians(1.0);

    var localFrames = [
        {
            pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.045000, 5000.0),
            converter : Cesium.Transforms.eastNorthUpToFixedFrame,
            comments : 'Classical East North Up\nlocal Frame'
        },
        {
            pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.050000, 5500.0),
            converter : Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west'),
            comments : 'North West Up\nlocal Frame'
        },
        {
            pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.040000, 4500.0),
            converter : Cesium.Transforms.localFrameToFixedFrameGenerator('south', 'up'),
            comments : 'South Up West\nlocal Frame'
        },
        {
            pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.050000, 4500.0),
            converter : Cesium.Transforms.localFrameToFixedFrameGenerator('up', 'east'),
            comments : 'Up East North\nlocal Frame'
        },
        {
            pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.040000, 5500.0),
            converter : Cesium.Transforms.localFrameToFixedFrameGenerator('down', 'east'),
            comments : 'Down East South\nlocal Frame'
        }
    ];

    var primitives = [];
    var hprRollZero = new Cesium.HeadingPitchRoll();

    for (var i = 0; i < localFrames.length; i++) {
        var position = localFrames[i].pos;
        var converter = localFrames[i].converter;
        var comments = localFrames[i].comments;
        var planePrimitive = scene.primitives.add(Cesium.Model.fromGltf({
            url : '../data/models/CesiumAir/Cesium_Air.glb',
            modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, converter),
            minimumPixelSize : 128
        }));

        primitives.push({primitive : planePrimitive, converter : converter, position : position});
        var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, hprRollZero, Cesium.Ellipsoid.WGS84, converter);
        scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
            modelMatrix : modelMatrix,
            length : 300.0,
            width : 10.0
        }));

        var positionLabel = position.clone();
        positionLabel.z = position.z + 300.0;
        viewer.entities.add({
            position : positionLabel,
            label : {
                text : comments,
                font : '18px Helvetica',
                fillColor : Cesium.Color.WHITE,
                outlineColor : Cesium.Color.BLACK,
                outlineWidth : 2,
                style : Cesium.LabelStyle.FILL_AND_OUTLINE,
                verticalOrigin : Cesium.VerticalOrigin.CENTER,
                HorizontalOrigin : Cesium.HorizontalOrigin.RIGHT
            }
        });
    }

    primitives[0].primitive.readyPromise.then(function(model) {
        // Play and loop all animations at half-speed
        model.activeAnimations.addAll({
            multiplier : 0.5,
            loop : Cesium.ModelAnimationLoop.REPEAT
        });

        // Zoom to model
        r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
        controller.minimumZoomDistance = r * 0.5;
        Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
        var heading = Cesium.Math.toRadians(90.0);
        var pitch = Cesium.Math.toRadians(0.0);
        hpRange.heading = heading;
        hpRange.pitch = pitch;
        hpRange.range = r * 100.0;
        camera.lookAt(center, hpRange);
    });

    document.addEventListener('keydown', function(e) {
        switch (e.keyCode) {
            case 40:
                // pitch down
                hpRoll.pitch -= deltaRadians;
                if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
                    hpRoll.pitch += Cesium.Math.TWO_PI;
                }
                break;
            case 38:
                // pitch up
                hpRoll.pitch += deltaRadians;
                if (hpRoll.pitch > Cesium.Math.TWO_PI) {
                    hpRoll.pitch -= Cesium.Math.TWO_PI;
                }
                break;
            case 39:
                if (e.shiftKey) {
                    // roll right
                    hpRoll.roll += deltaRadians;
                    if (hpRoll.roll > Cesium.Math.TWO_PI) {
                        hpRoll.roll -= Cesium.Math.TWO_PI;
                    }
                } else {
                    // turn right
                    hpRoll.heading += deltaRadians;
                    if (hpRoll.heading > Cesium.Math.TWO_PI) {
                        hpRoll.heading -= Cesium.Math.TWO_PI;
                    }
                }
                break;
            case 37:
                if (e.shiftKey) {
                    // roll left until
                    hpRoll.roll -= deltaRadians;
                    if (hpRoll.roll < 0.0) {
                        hpRoll.roll += Cesium.Math.TWO_PI;
                    }
                } else {
                    // turn left
                    hpRoll.heading -= deltaRadians;
                    if (hpRoll.heading < 0.0) {
                        hpRoll.heading += Cesium.Math.TWO_PI;
                    }
                }
                break;
            default:
        }
    });

    var headingSpan = document.getElementById('heading');
    var pitchSpan = document.getElementById('pitch');
    var rollSpan = document.getElementById('roll');

    viewer.scene.preUpdate.addEventListener(function(scene, time) {
        for (var i = 0; i < primitives.length; i++) {
            var primitive = primitives[i].primitive;
            var converter = primitives[i].converter;
            var position = primitives[i].position;
            Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, converter, primitive.modelMatrix);
        }
    });

    viewer.scene.preRender.addEventListener(function(scene, time) {
        headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
        pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
        rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
    });


</script>
</body>
</html>